<template>
    <div>
        <div class="he">
            <div class="header-btn">
                <div class="search">
                    <van-icon name="search" />
                    <span class="size" @click="tiao">搜索</span>
                </div>
            </div>
        </div>
        <van-tabs @click="dj" class="title">
            <van-tab v-for="(item,index) in arr" :name="item._id" :title="item.name" :key="index" >
            </van-tab>
        </van-tabs>
        <van-list class="tab" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ul>
            <li v-for="(item,index) in list" :key="index" @click="article(index)">
                <div class="wz">
                    <span>{{item.title}}</span>
                </div>
                <div class="img">
                    <img v-for="(item,index) in item.imageSrc" :key="index" :src="item" alt="">
                </div>
                <div class="aricle_bottom">
                    <span class="left">昵称:{{ item.author }}</span>   
                    <span class="cont">评论:{{ item.comment }}</span> 
                    <span class="right">时间:{{ item.time | dateFormate }}</span>
                </div>
            </li>
        </ul>
        </van-list>
    </div>
</template>
<script>


export default{
    data(){
        return{
            value: '',
            arr:[],
            id:'',
            list: [],
            loading: false,
            finished: false,
            num:0,
            uid:[]
        }
    },
    methods:{
        article(index){
            this.uid = this.list[index]._id
            this.$http.post('/api/get_article_detail',{
                article_id:this.uid,
                user_id:''
            })
            .then((res)=>{
                console.log(res)
                this.$router.push({
                    name:'article',
                    query:{
                        id:this.uid
                    }
                })
            })
        },
        tiao(){
            this.$router.push('/search')
        },
        dj(name){
            this.id=name
            this.list=[]
            this.num = 0
            this.finished = false
            this.get_list(name,this.num)
        },
        get_list(id,num){
            this.loading = true
            this.$http.post('/api/get_article_list',{
                cate_id:id,
                skip:num,
                limit:10
            })
            .then((res)=>{
                this.loading = false
                this.list = [...this.list,...res.data]
                this.num+=10
                if(res.data.length==0){
                    this.finished = true
                }else{
                    this.finished = false
                }
            })
            .catch((error)=>{
                console.log(error);
            })
        },
        onLoad(){
            this.get_list(this.id,this.num)
        }
    },
    created(){
        this.$http.post('/api/get_cate_list')
        .then((res)=>{
            this.arr = res.data
            localStorage.setItem('arr',JSON.stringify(this.arr))
            this.id=res.data[0]._id
            this.get_list(this.id,this.num)
        })
        .catch((error)=>{
            console.log(error)
        })
    }
}
</script>
<style>
html{
    background-color: #f5f7f9;
}
.he{
    width:100%;
    height:46px;
    background-color: #07c160;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    align-items: center;
    justify-content: space-between;
    display: flex;
    z-index: 1;
}
.title{
    padding-top: 46px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    align-items: center;
    justify-content: space-between;
    display: flex;
}
.van-tabs__line{
    width: 15px;
    height:3px;
    background-color: #07c160;
}
.header-btn{
    width:70%;
    height: 32px;
    background-color: #66d79d;
    border-radius: 16px;
    margin: auto;
    text-align: center;
}
.search{
    color: #fff;
    line-height: 32px;
    
}
.search .van-icon{
    font-size: 14px;
}
.size{
    font-size: 12px;
}
.tab{
    padding-top: 90px;
    padding-bottom: 50px;
}
.tab li{
    border: 1px solid #ccc;
    height: 200px;
}
.tab .img{
    height: 110px;
    width: 100%;
}
.tab .img img{
    width:100px;
    height: 100px;
    float: right;
}
.van-tabs__nav--line.van-tabs__nav--complete{
    padding-left: 0;
}
.van-tab{
    border: 1px solid #edeff3;
}
.aricle_bottom{
    padding-top: 10px;
    text-align: center;
    
}
.aricle_bottom .left{
    width: 100px;
    height: 15px;
    overflow: hidden;
    float: left;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.aricle_bottom .right{
    float: right;
}
.wz{
    width: 100%;
    height: 60px;
    overflow:hidden;
    white-space: wrap;
    text-overflow: ellipsis;
}
</style>